<template>
	<view class="container">
		<view class="tabs">
			<u-tabs :list="tabsList" :active-color="$setting.colorTheme()" :is-scroll="false" :current="tabsCurrent" @change="tabsChange"></u-tabs>
		</view>
		<view class="tabs-placeholder"></view>
		
		<view class="list">
			<view class="item bg-fff" v-for="(item,index) in list" :key="index">
				<view class="item-title flex-space-between">
					<view>发票抬头</view>
					<view>{{item.invoice.title || ""}}</view>
				</view>
				<view class="item-tips">联系人：{{item.invoice.name || ""}}</view>
				<view class="item-tips">联系电话：{{item.invoice.phone || ""}}</view>
				<view class="item-tips">订单号：{{item.order.order_no || ""}}</view>
			</view>
		</view>
		<view v-if="list.length == 0" style="padding-top: 100rpx;">
			<u-empty text="暂无数据" mode="data"></u-empty>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [
					{
						id: 1,
						name: "已开票"
					},
					{
						id: 0,
						name: "开票中"
					},
				],
				tabsCurrent: 0,
				list: [],
				pageForm: {
					status: 1,
				},
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getHttp();
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			tabsChange(e) {
				this.tabsCurrent = e;
				this.pageForm.status = this.tabsList[e].id;
				this.pageForm.page = 1;
				this.list = [];
				this.getInvoiceOrder();
			},
			getInvoiceOrder() {
				uni.$u.api.getInvoiceOrder(this.pageForm).then(res => {
					this.list = res;
				})
			},
			getHttp() {
				this.getInvoiceOrder();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx;
		
		.tabs {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
		}
		
		.tabs-placeholder {
			height: 80rpx;
		}
		
		.list {
			
			.item {
				margin-bottom: 24rpx;
				border-radius: 16rpx;
				padding: 20rpx 40rpx;
				
				.item-title {
					padding-bottom: 20rpx;
					border-bottom: 1px dashed #D8D8D8;
					margin-bottom: 20rpx;
				}
				
				.item-tips {
					margin-top: 4rpx;
					font-size: 24rpx;
					color: #666666;
				}
				
				.item-operate {
					margin-top: 20rpx;
					justify-content: flex-end;
					
					text {
						font-size: 24rpx;
						color: #666666;
						margin-left: 50rpx;
					}
				}
			}
		}
	}
</style>
